<template>
  <el-dialog v-model="centerDialogVisible" append-to-body :title="title" width="500px" destroy-on-close
    :before-close="onBeforeClose" draggable :close-on-click-modal="false">
    <div>
      <es-upload ref="excelFileList" v-model="form.excelFileList" :action="actionUrl[typeLabel]" :limit="10"
        accept=".xlsx,.xls,.json,.geojson,png" :disabledAutoUpload="true" :isShowOperateButtons="isShowOperateButtons"
        @upload-success="excelFileListSuccess" @upload-error="onUploadError" @on-change="onUploadChange($event, true)">
        <el-button :disabled="isHaveGeoJsonFileListLength" type="success">请选择文件</el-button>
        <!-- <template #tip>
          请选择.xlsx,.xls,.geojson后缀文件，允许空间数据与表格数据一起上传
        </template> -->
      </es-upload>
    </div>
    <div>请选择.xlsx,.xls,.geojson后缀文件，允许空间数据与表格数据一起上传</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSaveClick" :loading="isLoading">确 认</el-button>
        <el-button @click="onCancelClick">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, computed, watch } from 'vue'
import { importBoxItem } from './upload/inprotBox' // 导入不同类别的接口地址
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    // 导入框的显示隐藏
    type: Boolean,
    defalut: false,
  },
  typeLabel: {
    // 导入类别
    type: String,
  },
  isShowOperateButtons: {
    // 是否显示文件列表操作按钮
    type: Boolean,
    defalut: true,
  },
})
const emit = defineEmits(['update:modelValue', 'close-importBox'])

// 导入框的标题
let title = computed(() => {
  return `数据导入(${props.typeLabel})`
})

watch(() => props.modelValue, (newVal, oldVal) => {
  centerDialogVisible.value = newVal // 传入参数更新导入框的显示隐藏
})


let actionUrl = importBoxItem // 不同类别的接口地址

let form = ref({
  excelFileList: [], // 导入的文件列表
  GeoJsonFileList: [], // 导入的地理信息文件列表
})
let centerDialogVisible = ref(false) // 默认隐藏导入对话框
let isLoading = ref(false) // 导入时的loading加载

// 判断当前文件列表是否有数据
let isHaveExcelFileListLength = computed(() => {
  return Boolean(form.value.excelFileList.length)
})
// 判断当前geojson文件列表是否有数据
let isHaveGeoJsonFileListLength = computed(() => {
  return Boolean(form.value.GeoJsonFileList.length)
})


// 确认上传
const onSaveClick = () => {
  // 判断当前类别是否有接口地址
  if (!actionUrl[props.typeLabel])
    return ElMessage({
      type: 'warning',
      message: '暂无此功能',
    })

  isLoading.value = true // 开启上传加载

  // 判断当前文件类型，进行不同的上传
  isHaveGeoJsonFileListLength.value
    ? reSaveGeoJsonImport() // 地理信息geojson文件
    : reSaveExcelImport() // 正常文件
}
// 保存geoJson
const reSaveGeoJsonImport = () => { }

// 上传
let excelFileList = ref()
const reSaveExcelImport = () => {
  excelFileList.value.getOssFileUpload() // 调用upload组件的上传方法
}

// 文件上传成功的回调
const excelFileListSuccess = () => {
  ElMessage({
    type: 'success',
    message: '数据导入成功',
  })

  onBeforeClose() // 导入后关闭弹框和初始化数据
}
// 文件上传时的变化
const onUploadChange = (e, type) => {
  if (!type) {
    isLoading.value = true
  }
}

// 文件上传报错
const onUploadError = () => {
  isLoading.value = false
}
// 取消上传
const onCancelClick = () => {
  onBeforeClose()
}

// 关闭弹框的处理
const onBeforeClose = () => {
  form.value = {
    excelFileList: [],
    GeoJsonFileList: [],
  }
  isLoading.value = false // 取消上传时的loading
  emit('update:modelValue', false) // 隐藏导入框
  emit('close-importBox') // 触发父组件更新数组列表
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;

  .hand:hover {
    cursor: pointer;
  }
}

.text {
  font-size: 14px;
}

.box-card {
  width: 480px;
}

.Disable {
  pointer-events: none;
}

:deep() {
  .isLeft10 {
    margin-left: 0%;
  }
}
</style>
